<template>
  <div class="test-container">
    <h2>字典树形选择器测试</h2>

    <!-- 单选模式 -->
    <div class="demo-section">
      <h3>单选模式</h3>
      <DictCatalogTree v-model="singleValue" dict-code="eac_code" placeholder="请选择学历" :width="300" @change="handleSingleChange" />
      <p>选中值：{{ singleValue }}</p>
    </div>

    <!-- 多选模式 -->
    <div class="demo-section">
      <h3>多选模式</h3>
      <DictCatalogTree
        v-model="multipleValue"
        dict-code="eac_code"
        placeholder="请选择学历（多选）"
        :width="300"
        :multiple="true"
        @change="handleMultipleChange"
      />
      <p>选中值：{{ multipleValue }}</p>
    </div>

    <!-- 不同尺寸 -->
    <div class="demo-section">
      <h3>不同尺寸</h3>
      <div style="margin-bottom: 10px">
        <label>大尺寸：</label>
        <DictCatalogTree v-model="sizeValue1" dict-code="eac_code" size="large" :width="200" />
      </div>
      <div style="margin-bottom: 10px">
        <label>默认尺寸：</label>
        <DictCatalogTree v-model="sizeValue2" dict-code="eac_code" size="default" :width="200" />
      </div>
      <div style="margin-bottom: 10px">
        <label>小尺寸：</label>
        <DictCatalogTree v-model="sizeValue3" dict-code="eac_code" size="small" :width="200" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import DictCatalogTree from '@/components/DictCatalogTree/index.vue'

  const singleValue = ref('')
  const multipleValue = ref<string[]>([])
  const sizeValue1 = ref('')
  const sizeValue2 = ref('')
  const sizeValue3 = ref('')

  function handleSingleChange(value: string, node: any) {
    console.log('单选变化:', value, node)
  }

  function handleMultipleChange(value: string[], node: any) {
    console.log('多选变化:', value, node)
  }
</script>

<style scoped>
  .test-container {
    padding: 20px;
    max-width: 800px;
  }

  .demo-section {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
  }

  .demo-section h3 {
    margin-top: 0;
    color: #409eff;
  }
</style>
